<template>
    <div class="product-list">
        <h2>商品列表</h2>
        <!-- 遍历商品数组并渲染每个商品的信息 -->
        <div class="product" v-for="product in products" :key="product.id">
            <h3>{{ product.name }}</h3>
            <p>价格: {{ product.price }} 元</p>
            <!-- 按钮，点击时触发添加商品到购物车的事件 -->
            <button @click="addToCart(product)">添加到购物车</button>
        </div>
    </div>
</template>

<script setup>
// 引入 Vue 的 ref 函数用于定义响应式数据
import { ref } from 'vue';

// 定义响应式的商品数组，包含多个商品对象
const products = ref([
    { id: 1, name: '商品 A', price: 100 }, // 商品 A
    { id: 2, name: '商品 B', price: 200 }, // 商品 B
    { id: 3, name: '商品 C', price: 300 }, // 商品 C
]);

// 定义 emit 事件，用于向父组件发送添加到购物车的事件
const emit = defineEmits(['add-to-cart']);

// 添加商品到购物车的函数
const addToCart = (product) => {
    // 抛出 add-to-cart 事件让父组件(Index)监听到，并传递被添加的商品对象
    emit('add-to-cart', product);
};
</script>

<style scoped>
.product-list {
    margin-bottom: 20px; /* 设置商品列表底部间距 */
}

.product {
    border: 1px solid #ccc; /* 为每个商品项添加边框 */
    padding: 10px; /* 内边距 */
    margin-bottom: 10px; /* 每个商品项之间的间距 */
}
</style>